<script setup>
import { reactive, watch, toRefs, watchEffect } from 'vue';

const state = reactive({
  price: 100,
  name: '涛涛'
})

const { price, name } = toRefs(state)

// watchEffect 非惰性的侦听器，更加抽象显示函数内的变量
// 只要在函数内有使用到的变量都会被监听到
// 只要有一个发生改变该侦听器就会立即被调用
// 谨慎使用：这样去写会导致你监听的数据多了的情况下会消耗特别大
watchEffect(() => {
  console.log('watchEffect', price.value);
  console.log('watchEffect', name.value);
})

</script>

<template>
  <div>
    <h1>
      {{ price }}
    </h1>
    <input type="text" v-model="price">

    <button @click="change">点击修改</button>
  </div>
</template>

